<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限编辑页面</title>
    <link rel="stylesheet" th:href="@{/pear/component/pear/css/pear.css}"/>
</head>
<body>
<form class="layui-form" method="POST" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-form-item">
                <label class="layui-form-label">权限名称</label>
                <div class="layui-input-block">
                    <input type="text" name="permissionName" maxlength="10" lay-verify="required|permissionNam" autocomplete="off"
                           placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限代码</label>
                <div class="layui-input-block">
                    <input type="text" name="permissionCode" maxlength="50" lay-verify="required|permissionCod"
                           autocomplete="off"
                           placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">权限描述</label>
                <div class="layui-input-block">
                    <input type="text" name="description" maxlength="30" lay-verify="description" autocomplete="off"
                           placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item ">
                <label class="layui-form-label">选择上级权限</label>
                <div class="layui-input-block">
                    <div id="ID-tree-demo-showCheckbox"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn  layui-btn-sm" lay-submit=""
                    lay-filter="power-edit">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script th:src="@{/pear/component/layui/layui.js}"></script>
<script th:src="@{/pear/component/pear/pear.js}"></script>
<script th:src="@{/pear/component/layui/authtree.js}"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery', 'authtree'], function () {
        let baseURL = /*[[@{/}]]*/ '';
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        let authtree = layui.authtree;
        let ids = [];
        // 渲染
        $.ajax({
            url: baseURL + "permission/list",
            type: 'get',
            success: function (res) {
                let filteredData = res.data.filter(function (item) {
                    return item.permissionId !== parent.permissionId;
                });
                let trees = authtree.listConvert(filteredData, {
                    primaryKey: 'permissionId'
                    , startPid: 0
                    , parentKey: 'permissionParentId'
                    , nameKey: 'permissionName'
                    , valueKey: 'permissionId'
                    , checkedKey: res.data.permissionId
                });
                // 遍历树数据，设置默认选中的节点
                let permissionParentId = parent.permissionParentId;

                function setDefaultCheckedNodes(nodes, permissionParentId) {
                    nodes.forEach(function (node) {
                        console.log(permissionParentId)
                        if (node.value === permissionParentId) {
                            node.checked = true; // 设置该节点为选中状态
                        }
                        if (node.list) {
                            setDefaultCheckedNodes(node.list, permissionParentId); // 递归处理子节点
                        }
                    });
                }

                // 调用函数设置默认选中的节点
                setDefaultCheckedNodes(trees, permissionParentId);
                authtree.render('#ID-tree-demo-showCheckbox', trees, {
                    autoWidth: true,
                    openChecked: true,
                    autochecked: false,
                    autoclose: false
                });
                authtree.on('change(#ID-tree-demo-showCheckbox)', function () {
                    // 获取选中节点
                    ids = authtree.getChecked('#ID-tree-demo-showCheckbox');
                });

            }
        })
        form.on('submit(power-edit)', function (data) {
            if (ids.length === 0) {
                data.field.permissionParentId = 0
            } else {
                data.field.permissionParentId = ids[0]
            }
            data.field.permissionId = parent.permissionId
            $.ajax({
                url: baseURL + 'permission/update',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    if (result.code === 1000) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 2000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name))//关闭当前页
                            parent.render()
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 2000
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name))//关闭当前页
                        });
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>
